<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item>
        <el-button type="primary" @click="getPoints">Query</el-button>
      </el-form-item>
      <el-form-item label="Uid">
        <el-input v-model.trim="form.uid" clearable @change="getPoints" placeholder="Uid fuzzy query"></el-input>
      </el-form-item>
      <el-form-item label="Phone">
        <el-input v-model.trim="form.phone" clearable @change="getPoints" placeholder="Phone fuzzy query"></el-input>
      </el-form-item>
      <el-form-item label="Type">
        <el-select v-model="form.type" @change="getPoints" style="width: 100px;">
          <el-option label="All" :value="-1"></el-option>
          <el-option label="Person" :value="1"></el-option>
          <el-option label="Share" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-if="!edit" type="primary" @click="edit = true">Edit</el-button>
        <el-button v-else type="primary" @click="edit = false">Exit Editing</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="tableData" border style="width: 100%" empty-text="There is currently no data available">
      <el-table-column prop="name" label="operation" width="100" v-if="edit">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="delPoint(scope)">Del</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="name">
        <template slot-scope="scope">
          <span v-if="edit">
            <el-input v-model="scope.row.name" @change="setPoint(scope, 'name')"></el-input>
          </span>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="detail" label="detail">
        <template slot-scope="scope">
          <span v-if="edit">
            <el-input v-model="scope.row.detail" @change="setPoint(scope, 'detail')"></el-input>
          </span>
          <span v-else>{{ scope.row.detail }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="icon">
        <template slot-scope="scope">
          <img v-if="scope.row.icon" @click="setIcon(scope)" :src="scope.row.icon | icon" alt="icon">
          <el-button v-if="edit && !scope.row.icon" type="primary" size="mini" @click="setIcon(scope)">Upload</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="photo" label="photo">
        <template slot-scope="scope">
          <img v-if="scope.row.photo" @click="setPhoto(scope)" :src="scope.row.photo | photo" alt="photo">
          <el-button v-if="edit && !scope.row.photo" type="primary" size="mini"
            @click="setPhoto(scope)">Upload</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="type" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">Person</span>
          <span v-else-if="scope.row.type == 2">Share</span>
        </template>
      </el-table-column>
      <el-table-column prop="longitude" label="longitude" width="150">
        <template slot-scope="scope">
          <span v-if="edit">
            <el-input v-model.number="scope.row.longitude" @change="setPoint(scope, 'longitude')"></el-input>
          </span>
          <span v-else>{{ scope.row.longitude }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="latitude" label="latitude" width="150">
        <template slot-scope="scope">
          <span v-if="edit">
            <el-input v-model.number="scope.row.latitude" @change="setPoint(scope, 'latitude')"></el-input>
          </span>
          <span v-else>{{ scope.row.latitude }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="direction" label="direction" width="150">
        <template slot-scope="scope">
          <span v-if="edit">
            <el-select v-model="scope.row.direction" @change="setPoint(scope, 'direction')" placeholder="">
              <el-option v-for="(direction, index) in directions" :key="index" :label="direction"
                :value="direction"></el-option>
            </el-select>
          </span>
          <span v-else>{{ scope.row.direction }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="uploader" label="uploader" width="180">
      </el-table-column>
      <el-table-column prop="uploadTime" label="uploadTime">
      </el-table-column>
    </el-table>

    <input type="file" ref="file" style="display: none;" accept=".bmp, .jpg, .jpeg, .png" />
  </div>
</template>
<script>
import { GetPointsAPI, SetPointAPI, DelPointAPI, UploadIconAPI, UploadPhotoAPI } from '@/api'
import config from '@/../config'
export default {
  data() {
    return {
      tableData: [],
      form: {
        uid: '',
        phone: '',
        type: -1,
      },
      directions: ['Northeast', 'North', 'Northwest', 'West', 'Southwest', 'East', 'Southeast', 'South', 'Any direction'],

      edit: false,
    };
  },
  filters: {
    icon(val) {
      return config.host + 'static/pointIcon/' + val;
    },
    photo(val) {
      return config.host + 'static/pointImage/' + val;
    },
  },
  methods: {
    // Query all points by form
    async getPoints() {
      let { data } = await GetPointsAPI(this.form);
      this.tableData = data.points;
    },
    // Modify point information
    async setPoint(scope, params) {
      let json = {
        pid: scope.row.pid,
        [params]: scope.row[params]
      }
      let { data } = await SetPointAPI(json)
    },
    // Modify point Icon
    async setIcon(scope) {
      if (!this.edit) return
      this.$refs.file.click()
      setTimeout(async () => {
        let files = this.$refs.file.files
        if (files.length) {
          let formData = new FormData()
          formData.append('pid', scope.row.pid)
          formData.append('icon', files[0])
          let { data } = await UploadIconAPI(formData)
          this.$set(scope.row, 'icon', data.name)
        }
        this.$refs.file.value = ''
      }, 10);
    },
    // Modify point Photo
    async setPhoto(scope) {
      if (!this.edit) return
      this.$refs.file.click()
      setTimeout(async () => {
        let files = this.$refs.file.files
        if (files.length) {
          let formData = new FormData()
          formData.append('pid', scope.row.pid)
          formData.append('photo', files[0])
          let { data } = await UploadPhotoAPI(formData)
          this.$set(scope.row, 'photo', data.name)
        }
        this.$refs.file.value = ''
      }, 10);
    },
    // Del point
    async delPoint(scope) {
      let { data } = DelPointAPI({ pid: scope.row.pid })
      this.tableData.splice(scope.$index, 1)
    }
  },
  mounted() {
    this.getPoints();
  }
}
</script>
<style scoped></style>